<template>
	<view class="container">
		<view class="info cardBorder">
			<view class="avater cell">
				<view class="cell-l">
					头像
				</view>
				<view class="cell-r">
					<image class="cell-r-img" :src="avatar" mode="aspectFill" @click="chooseImg" />
					<van-icon name="arrow" size="14" color="#8b8b8b" />
				</view>
			</view>
			<view class="nickName cell" @click="cellClick">
				<view class="cell-l">
					昵称
				</view>
				<view class="cell-r">
					<!-- <text>{{nickName}}</text> -->
					<input class="cell-r-input" type="text" v-model="nickName" placeholder="昵称限制1～30字符" />
					<van-icon name="arrow" size="14" color="#8b8b8b" />
				</view>
			</view>
		</view>
		<view class="bot">
			<van-button class="botBtn" :disabled="saveLoading" round type="info" size="large"
				@click="save">保存</van-button>
		</view>
		<van-popup v-model:show="popShow" round closeable position="bottom" custom-style="height: 240px;"
			@close="popShow=false">
			<view class="pop">
				<view class="pop-head">
					{{'修改昵称'}}
				</view>
				<view class="pop-main">
					<view class="clearInput">
						<text class="clearInput-name">昵称</text>
						<input class="clearInput-input" placeholder="请输入昵称" v-model="editForm.nickName" />
						<view class="clearInput-icon" v-show="showClearIcon" @click="editForm.nickName=''">
							<van-icon name="cross" size="14" color="#fff" />
						</view>
					</view>
					<view class="pop-main-warn">
						<text>昵称限制1～30字符，一个汉字为一个字符</text>
					</view>
					<van-button class="botBtn" round type="info" size="large" @click="confirm">确认</van-button>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {
		postUserSetUserInfo
	} from '@/common/api.js'
	import {
		postUploadImage,
		delUploadImage
	} from '@/common/momentApi.js'
	export default {
		name: 'info',
		data() {
			return {
				popShow: false,
				// showClearIcon:false,
				nickName: '',
				avatar: '',
				editForm: {
					nickName: ''
				},
				saveLoading: false
			}
		},
		computed: {
			showClearIcon() {
				return this.editForm.nickName ? true : false
			}
		},
		onLoad() {
			this.nickName = getApp().globalData.Nick_Name
			this.avatar = getApp().globalData.Avatar
		},
		methods: {
			cellClick() {
				console.log('点击')
				// this.popShow = true
				// this.editForm.nickName = this.nickName
			},
			confirm() {
				this.popShow = false
				this.nickName = this.editForm.nickName
			},
			chooseImg() {
				uni.chooseImage({
					count: 1, // 最多选择 2 张图片
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
					success: (res) => {
						console.log(res)
						this.avatar = res.tempFilePaths[0]; // 将选择的图片路径保存到 imageList
					}
				})
			},
			async save() {
				this.saveLoading = true
				console.log(111, this.avatar)
				if (!this.nickName || !this.avatar) {
					return uni.showToast({
						title: '昵称或者头像不能为空',
						icon: 'none',
					})
				}
				let avatarUrl = ''
				if (this.avatar != getApp().globalData.Avatar) {
					const resData = await uni.uploadFile({
						url: `${getApp().globalData.utils.baseUrl}/Forum/UploadImage?type=1&imageName=${this.avatar}`, // 服务器上传接口
						filePath: this.avatar,
						name: 'file', // 必须填写，后台用来接收文件
						formData: {
							type: 1,
							'imageName': this.avatar, // 其他POST请求中的额外参数
						},
					})
					let resData1 = JSON.parse(resData.data)
					console.log(resData1)
					if (resData1.data) {
						avatarUrl = resData1.data
					} else {
						this.saveLoading = false
						uni.showToast({
							title: '头像上传失败' + resData1.message,
							icon: 'none',
						})
					}
				}
				const params = {
					"avatar": avatarUrl,
					"nickName": this.nickName
				}
				console.log(22)
				const res = await postUserSetUserInfo(params)
				console.log(1, res)
				if (res.data) {
					uni.showToast({
						title: '保存成功',
						icon: 'none',
					})
					uni.reLaunch({
						url: `../mine/index`
					});
				} else {
					uni.showToast({
						title: '保存失败',
						icon: 'none',
					})
				}
				this.saveLoading = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		background-color: #ececec;
		box-sizing: border-box;

		.info {
			padding: 15px;
			font-size: 16px;

			.cell {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 60px;
				line-height: 60px;

				&-r {
					font-size: 15px;
					display: flex;
					align-items: center;

					&-input {
						margin-right: 8px;
						width: 180px;
						text-align: right;
					}

					&-img {
						width: 40px;
						height: 40px;
						border-radius: 50%;
						margin-right: 8px;
						border: 1px solid #ececec;
					}
				}
			}
		}

		.bot {
			width: 100%;
			position: absolute;
			bottom: 15px;
			left: 0;
			box-sizing: border-box;
			padding: 0 15px;
		}

		.pop {
			width: 100%;
			height: 100%;

			&-head {
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 15px;
			}

			&-main {
				padding: 10px 15px;

				.clearInput {
					font-size: 14px;
					height: 50px;
					border-radius: 10px;
					background-color: #eee;
					box-sizing: border-box;
					padding: 0 20px 0;
					display: flex;
					align-items: center;

					&-name {
						margin-right: 15px;
					}

					&-input {
						font-size: 14px;
						flex: 1;
					}

					&-icon {
						background-color: #aaa;
						width: 18px;
						height: 18px;
						border-radius: 50%;
						color: #fff;
						font-size: 16px;
						text-align: center;
						line-height: 18px;
					}
				}

				&-warn {
					font-size: 12px;
					color: #8b8b8b;
					margin: 10px 0 15px;
				}

				.botBtn {
					width: 90%;
					height: 45px;
					line-height: 45px;
					margin: 15px auto;
				}
			}
		}
	}

	.cardBorder {
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 30rpx;
		background-color: #fff;
		margin: 15px 10px;
	}
</style>